<template>
	<div>
		<div class="choice-time">
			<span class="title">打点时间:</span>
			<span class="time-name f-12 text-overflow-1">{{ timeText }}</span>
			<el-button
				size="mini"
				type="text"
				icon="el-icon-edit"
				@click="onChoice"
			>
				重设打点位置
			</el-button>
		</div>
		<el-dialog
			:center="true"
			title="重设打点位置"
			width="1057px"
			:append-to-body="true"
			:close-on-click-modal="false"
			:visible.sync="isShow"
		>
			<dot-video
				ref="docVideoRef"
				v-if="isShow"
				type="edit"
				:height="300"
				:vid="vid"
				:start-time="startTime"
				:end-time="endTime"
				:resource-id="resourceId"
				:allow-fullscreen="false"
				v-loading="initLoading"
			/>
			<div slot="footer" class="dialog-footer">
				<el-button @click="isShow = false">取消</el-button>
				<el-button :loading="loading" type="primary" @click="onSubmit">确定</el-button>
			</div>
		</el-dialog>
	</div>
</template>
<script>
    import coursewareApi from "@rc/apis/rc/courseware.mjs";
    import DotVideo from '../dot-video/index.vue';
	export default {
		name: "choice-knowledge",
		props: {
            dotData:{
                type: Object,
				default:()=>{}
            },
            vid:{
                type: String,
				default:''
            },
            resourceId:{
                type: String,
				default:''
            }
		},
        components:{
            DotVideo
        },
        watch:{
            dotData:{
                handler(val){
                    if(val){
                        this.startTime = val.startTime;
                        this.endTime = val.endTime;
                    }
                },
                immediate:true
            }
        },
		data() {
			return {
                startTime:0,
                endTime:0,
                loading:false,
                isShow:false,
                initLoading:false
			};
		},
		computed: {
			timeText() {//展示的选择知识点名字
				return this.getHMS(this.startTime)+'~'+this.getHMS(this.endTime);
			},
		},
		methods: {
            onChoice(){
                this.isShow = true;
                this.initLoading=true;
                setTimeout(()=>{
                    this.initLoading =false;
                },500);
            },
            // 根据秒数转换成对应的时分秒
            getHMS (time) {
                if(!time){
                    return '00:00:00';
                }
                const hour = parseInt(time / 3600) < 10 ? '0' + parseInt(time / 3600) : parseInt(time / 3600);
                const min = parseInt(time % 3600 / 60) < 10 ? '0' + parseInt(time % 3600 / 60) : parseInt(time % 3600 / 60);
                const sec = parseInt(time % 3600 % 60) < 10 ? '0' + parseInt(time % 3600 % 60) : parseInt(time % 3600 % 60);
                return hour + ':' + min + ':' + sec;
            },
            onSubmit(){
                this.$confirm('确定更新打点位置吗？', '提示', {
                    type: 'warning'
                }).then(() => {
                    const {startTime,endTime} = this.$refs.docVideoRef.api_getVidTime();
                    this.loading= true;
                    coursewareApi.updateResourceVideoTime({
                        data: {
                            resourceVideoDotId:this.dotData.resourceVideoDotId,
                            startTime,
                            endTime,
                        },
                        success: () => {
                            this.isShow = false;
                            this.$message.success("更新打点时间成功");
                            this.$emit('submit-success');
                        },
                        complete: () => {
                            this.loading= false;
                        }
                    });
                });

            },

		}
	};
</script>
<style lang="less" scoped>
	.choice-time {
        display: flex;
        align-items: center;
        height: 40px;
		line-height: 40px;
		.title {
			font-weight: bold;
			font-size: 14px;
            flex-shrink: 0;
            margin-right: 5px;
		}
        .f-12{
            font-size: 12px;
        }
        .num{
            flex-shrink: 0;
        }
        .el-button{
            height: 32px!important;
            margin-left: 10px;
            &.edit{
                padding: 7px 8px;
            }
        }


	}
</style>
